<template>
	<view class="content">
		<u--form
				labelPosition="top"
				labelWidth="80"
				:model="form"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="手机号"
					borderBottom
					ref="phone"
					prop="phone"
					required
			>
				<u--input
						v-model="form.phone"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="验证码"
					borderBottom
					ref="code"
					prop="code"
					required
			>
				<view class="code-view">
					<view>
						<u--input
								v-model="form.code"
								border="none"
						></u--input>
					</view>
					<view>
						<u-button type="primary" @click="handleSendCode" :disabled="btnDisabled">{{btnContent}}</u-button>
					</view>
				</view>
			</u-form-item>
		</u--form>
		<view class="sub-btn">
			<u-button type="primary" @click="handleBind" :loading="loading" loadingText="绑定中....">绑定</u-button>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import { sendSMSCode,bindPhone } from '@/api/auth/user.js'
	
	export default {
		data() {
			return {
				// 倒计时的秒数
				seconds:30,
				// 按钮是否禁用
				btnDisabled:false,
				// 发送验证码按钮的文本内容
				btnContent:'发送验证码',
				form: {
					phone: '',
					code: ''
				},
				loading:false,
				// 表单的验证规则
				rules: {
					phone: {
						required:true,
						message:'请输入手机号',
						trigger: ['change','blur']
					},
					code: {
						required:true,
						message:'请输入验证码',
						trigger: ['change','blur']
						}
				}
			};
		},
		methods: {
			
			/**
			 * 发送短信验证码
			 */
			handleSendCode(){
				// 对表单字段的手机号进行校验
				// 获取到表单组件对象
				this.$refs.uForm.validateField('phone',(errorsRes) =>{
					console.log('errorsRes',errorsRes)
					if(!errorsRes.length){
						// 验证通过
						// 禁用按钮，启动倒计时
						this.btnDisabled = true  
						
						let interval = setInterval(()=>{
							this.btnContent = '重新发送(' + this.seconds + ')'
							this.seconds--
							if(this.seconds < 0){
								clearInterval(interval)
								// 启用按钮
								this.btnDisabled = false
								// 重新启用提示
								this.btnContent = '发送验证码'
								this.seconds = 30
							}
						},1000)  
						sendSMSCode(this.form.phone).then(res =>{
							// 判断是否发送成功
							if(res.code == 200){
								this.$refs.uToast.show({
									type: "success",
									message: "发送成功"
								});
								
							}else{
								this.$refs.uToast.show({
									type: "error",
									message: res.msg
								});
							}
						})
					}
				});
				
			}, 
			handleBind(){
				// 校验整个表单
				this.$refs.uForm.validate().then(res => {
					if(res){
						// 表单校验通过
						bindPhone(this.form.phone,this.form.code).then(res =>{
							// 判断绑定结果
							if(res.code == 200) {
								// 更新用户信息
								uni.setStorageSync("userInfo",res.userInfo);
								// 跳转到页面中
								uni.navigateTo({
									url:'/pages/interview/interview'
								})
							}else{
								this.$refs.uToast.show({
									type: "error",
									message: res.msg
								});
							}
						})
					}
				})
			}
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		    	this.$refs.uForm.setRules(this.rules)
		    },
	}
</script>

<style lang="scss">
	.content{
		padding: 50rpx;
	}
	.code-view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		ul-button{
			
		}
	}
	.sub-btn{
		margin-top: 50rpx;
	}
</style>
